<template>
	<view class="MyContainer" @touchmove="preventTouchMove">
		<view class="MyTop">
			<view class="MyTopContainer" :style="{background: `url(${imageBaseUrl}/mybj.png) no-repeat center / 100% 340rpx`}">
				<view class="MyTops">
					<view class="MyTopsLeft">
						<view class="MyTopsLeftl">
							<image :src="defaultCompanyInfo.tagList || '/static/images/touxiang.png'"></image>
						</view>
						<view class="MyTopsLeftr">
							{{ !eyeType ? hideCompanyName(defaultCompanyInfo.companyName) : (defaultCompanyInfo.companyName || '未关联企业') }}
							<view class="eyeImg" @click="eyeType = !eyeType">
								<image v-if="eyeType" class="eyeOn" src="/static/images/yanjingon.png"></image>
								<image v-else class="eyeOff" src="/static/images/yanjingoff.png"></image>
							</view>
						</view>
					</view>
					<view class="MyTopsRight" @click="goToEnterprise">切换企业</view>
				</view>
				<view class="MyTopx">
					<view class="MyTopxList">
						<view class="MyTopxListTitle">法定代表人</view>
						<view class="MyTopxListName">{{ defaultCompanyInfo.operName || '--' }}</view>
					</view>
					<view class="MyTopxList">
						<view class="MyTopxListTitle">注册资本</view>
						<view class="MyTopxListName">{{ formatRegistCapi(defaultCompanyInfo.registCapi) || '--' }}</view>
					</view>
					<view class="MyTopxList">
						<view class="MyTopxListTitle">成立日期</view>
						<view class="MyTopxListName">{{ defaultCompanyInfo.startDate || '--' }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="MyBot" :style="{background: `url(${imageBaseUrl}/mybj1.png) no-repeat center top / 100% 316rpx`}">
			<view class="MyBotThree">
				<view class="MyBotThreeList" @click="goToEnterprise">
					<view class="MyBotThreeImg">
						<image src="/static/images/qiyeimg.png"></image>
					</view>
					<view class="MyBotThreeTitle">我的企业</view>
				</view>
				<view class="MyBotThreeList" @click="goToCollect">
					<view class="MyBotThreeImg">
						<image src="/static/images/shoucangimg.png"></image>
					</view>
					<view class="MyBotThreeTitle">我的收藏</view>
				</view>
				<view class="MyBotThreeList" @click="goToMatchReport">
					<view class="MyBotThreeImg">
						<image src="/static/images/baogaoimg.png"></image>
					</view>
					<view class="MyBotThreeTitle">我的报告</view>
				</view>
			</view>
			<view class="MyBotSlide" :style="{background: `url(${imageBaseUrl}/mybotbj.png) no-repeat center / 100% 463rpx`}">
				<view class="MyBotSlides">
					<view class="MyBotSlidesTitle">智能推荐引擎</view>
					<view class="MyBotSlidesContent">同行业匹配度高</view>
				</view>
				<view class="MyBotSwiper">
					<swiper class="swiper-box" :autoplay="false" :interval="3000" :circular="true" indicator-dots
						indicator-color="#d5deff" indicator-active-color="#2f59fe" :slidesPerView="'auto'">
						<swiper-item v-for="(item, index) in policyList" :key="index" @click="goToGuideDetails(item)">
							<view class="MyBotSwiperLi">
								<view class="MyBotSwiperLiTitle">{{ item.policyName }}</view>
								<view class="MyBotSwiperLiTuiJian">
									<view class="MyBotSwiperLiTuiJianTitle">推荐指数：</view>
									<view class="MyBotSwiperLiTuiJianList">
										<view
											:class="['MyBotSwiperLiTuiJianListLi', (index == 0 || index == 1 || index == 2) ? 'on' : '']"
											v-for="(item, index) in 5" :key="index"></view>
									</view>
								</view>
								<view class="MyBotSwiperLiTabs">
									<view class="MyBotSwiperLiTabsList">{{ item.policyRegion }}</view>
									<view class="MyBotSwiperLiTabsList" id="MyBotSwiperLiTabsList2">{{ getDictLabel(item.policyType,dictList) }}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="MyEnd"><label @click="goToUserService">《用户服务协议》</label>和<label @click="goToPrivacyPolicy">《隐私政策》</label></view>
		<view class="MyLoginBtn" @click="handleLogout">退出登录</view>
		<customTabbar :currentPages="4" @tabChange="tabChange"/>
	</view>
</template>

<script>
	import customTabbar from '@/pages/components/custom-tabbar.vue';
	import { getMyPolicyList, getDefaultCompany, wechatLogout } from '@/api/api.js';
	import { useStore } from 'vuex';
	import { DICT_TYPES } from '@/store/modules/dict';
	import { getDictLabel } from '@/utils/dict';
	export default {
		components: {
			customTabbar
		},
		computed: {
			imageBaseUrl() {
				return this.$IMAGE_BASE_URL;
			}
		},
		data() {
			return {
				eyeType: false,
				policyList: [],  // 存储政策列表数据
				dictList: [],  // 存储字典数据
				defaultCompanyInfo: {},  // 存储默认企业信息
			}
		},
		mounted() {
			this.getDictData();
			this.getMyPolicyData();
			this.getDefaultCompanyData();
		},
		onShow() {
			// 每次页面显示时重新获取数据
			this.getDefaultCompanyData();
			this.getMyPolicyData();
		},
		methods: {
			tabChange(){
      console.log("个人中心")
     },
			getDictLabel,
			preventTouchMove(event) {
			  event.preventDefault();
			},
			hideCompanyName(name) {
			  if (name) {
				  return name.replace(/^(.{2})(.*)(.{3})$/, (match, p1, p2, p3) => {
				    return p1 + '*'.repeat(p2.length) + p3;
				  });
			  }
			},
			async getDictData() {
				const store = useStore();
				// 从Vuex中获取政策类型字典
				this.dictList = await store.dispatch('dict/loadDict', DICT_TYPES.POLICY_TYPE);
			},
			async getDefaultCompanyData() {
				try {
					const result = await getDefaultCompany();
					console.log('默认企业信息:', result);
					if (result.code === 0) {
						this.defaultCompanyInfo = result.data || {};
					}
				} catch (error) {
					console.error('获取默认企业信息失败:', error);
				}
			},
			async getMyPolicyData() {
				try {
					const result = await getMyPolicyList();
					console.log('政策列表数据:', result);
					if (result.code === 0){
						this.policyList = result.data.list || [];
					}
				} catch (error) {
					console.error('获取政策列表失败:', error);
				}
			},
			goToPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/privacyPolicy/index'
				})
			},
			goToUserService() {
				uni.navigateTo({
					url: '/pages/userService/index'
				})
			},
			goToMatchReport() {
				uni.navigateTo({
					url: '/pages/matchReport/index'
				})
			},
			goToCollect() {
				uni.navigateTo({
					url: '/pages/collect/index'
				})
			},
			goToEnterprise() {
				uni.navigateTo({
					url: '/pages/enterprise/index',
					events: {
						// 监听页面返回事件
						refreshData: () => {
							this.getDefaultCompanyData();
							this.getMyPolicyData();
						}
					}
				})
			},
			goToGuideDetails(item) {
				uni.navigateTo({
					url: `/pages/guideDetails/index?id=${item.id}`
				})
			},
			// 处理退出登录
			handleLogout() {
				uni.showModal({
					title: '退出确认',
					content: '退出登录后需要重新登录才能使用，是否确认退出？',
					confirmColor: '#2f59fe',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '退出中...'
							});
							try {
								const result = await wechatLogout();
								uni.hideLoading();
								if (result.code === 0) {
									// 清除用户相关信息
									try {
										uni.clearStorageSync();
										// 显示退出成功提示
										uni.showToast({
											title: '退出成功',
											icon: 'success',
											duration: 1500
										});
										// 延迟跳转，让用户看到提示
										setTimeout(() => {
											uni.reLaunch({
												url: '/pages/index/index'//目前没有明确登录功能逻辑，先退出登录后跳转到首页，后期修改
											});
										}, 1500);
									} catch (storageError) {
										console.error('清除存储失败:', storageError);
										// 即使清除存储失败，也继续跳转
										uni.reLaunch({
											url: '/pages/index/index'
										});
									}
								} else {
									uni.showToast({
										title: result.msg || '退出登录失败，请重试',
										icon: 'none',
										duration: 2000
									});
								}
							} catch (error) {
								uni.hideLoading();
								console.error('退出登录失败:', error);
								uni.showToast({
									title: '退出登录失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			// 处理注册资本数据，去掉"人民币"字样
			formatRegistCapi(value) {
				if (!value) return '';
				return value.replace('人民币', '');
			},
		}
	};
</script>

<style lang="scss">
	page {
		overflow: hidden;
		background: #f7f8fc;
	}
	.MyTop {
		padding: 29rpx 24rpx 0;
		background: #f7f8fc;

		.MyTopContainer {
			width: 100%;
			height: 340rpx;
			box-sizing: border-box;
			padding: 59rpx 21rpx 0 50rpx;

			.MyTops {
				display: flex;
				padding: 0 0 34rpx;
				justify-content: space-between;

				.MyTopsLeft {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.MyTopsLeftl {
						width: 77rpx;
						height: 76rpx;

						image {
							width: 77rpx;
							height: 76rpx;
							border-radius: 50rpx;
						}
					}

					.MyTopsLeftr {
						max-width: 320rpx;
						font-size: 32rpx;
						color: #ffffff;
						margin-left: 21rpx;

						.eyeImg {
							display: inline-block;
							width: 50rpx;
							height: 40rpx;

							.eyeOn {
								width: 22rpx;
								height: 17rpx;
							}

							.eyeOff {
								width: 19rpx;
								height: 7rpx;
							}
						}
					}
				}

				.MyTopsRight {
					width: 154rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					color: #ffffff;
					padding-left: 20rpx;
					box-sizing: border-box;
					margin: 55rpx 0 0;
					background: url("/static/images/qiehuanbj.png") no-repeat center / 154rpx 40rpx;
				}
			}

			.MyTopx {
				display: flex;
				justify-content: flex-start;

				.MyTopxList {
					width: 190rpx;
					height: 110rpx;
					margin-left: 16rpx;
					text-align: center;
					border-radius: 20rpx;
					background: #4065f5;

					.MyTopxListTitle,
					.MyTopxListName {
						font-size: 24rpx;
						color: #ffffff;
					}

					.MyTopxListTitle {
						padding: 20rpx 0 10rpx;
					}

					//法定代表、注册资金、成立日期view块溢出隐藏
					.MyTopxListName {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding: 0 10rpx;
						width: 100%;
						box-sizing: border-box;
					}
				}
			}
		}
	}

	.MyBot {
		width: 100%;
		min-height: 316rpx;
		padding: 30rpx 24rpx 0;
		box-sizing: border-box;

		.MyBotThree {
			display: flex;
			height: 183rpx;
			align-items: center;
			border-radius: 20rpx;
			justify-content: center;
			background: #ffffff;
			margin: 0 0 30rpx;

			.MyBotThreeList {
				text-align: center;
				position: relative;
				margin: 0 55rpx;

				.MyBotThreeImg {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 60rpx;
					margin: 0 0 6rpx;
				}
				.MyBotThreeTitle{
					font-size: 28rpx;
					color: #202020;
				}

				&:nth-child(1) {
					.MyBotThreeImg {
						image {
							width: 62rpx;
							height: 52rpx;
						}
					}
				}

				&:nth-child(2) {
					.MyBotThreeImg {
						image {
							width: 60rpx;
							height: 60rpx;
						}
					}
				}

				&:nth-child(3) {
					.MyBotThreeImg {
						image {
							width: 53rpx;
							height: 53rpx;
						}
					}
				}

				&::before {
					content: "";
					position: absolute;
					right: -54rpx;
					top: 50%;
					margin-top: -26rpx;
					width: 1px;
					height: 52rpx;
					background: #edf1f6;
					border-radius: 1px;
				}

				&:last-child {
					position: inherit;
				}
			}
		}

		.MyBotSlide {
			height: 463rpx;

			.MyBotSlides {
				display: flex;
				padding: 0 32rpx;
				justify-content: flex-start;
				height: 109rpx;
				align-items: center;

				.MyBotSlidesTitle {
					font-size: 32rpx;
					color: #202020;
				}

				.MyBotSlidesContent {
					width: 167rpx;
					height: 37rpx;
					line-height: 37rpx;
					font-size: 21rpx;
					color: #ffffff;
					padding: 6rpx 0 16rpx 18rpx;
					margin-left: 3rpx;
					background: url("/static/images/slidebj.png") no-repeat center / 185rpx 59rpx;
				}
			}

			.MyBotSwiper {
				padding-left: 31rpx;

				.MyBotSwiperLi {
					width: 555rpx;
					height: 272rpx;
					background: #ffffff;
					border-radius: 20rpx;
					padding: 31rpx 33rpx 0;
					box-sizing: border-box;
					border: 1px solid rgba(26, 61, 102, 0.1);

					.MyBotSwiperLiTitle {
						font-size: 32rpx;
						color: #202020;
						line-height: 41rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						max-width: 100%;
					}

					.MyBotSwiperLiTuiJian {
						display: flex;
						height: 55rpx;
						align-items: center;
						padding: 5rpx 0 10rpx;
						justify-content: flex-start;

						.MyBotSwiperLiTuiJianTitle {
							font-size: 28rpx;
							color: #4e5262;
						}

						.MyBotSwiperLiTuiJianList {
							display: flex;
							justify-content: flex-start;

							.MyBotSwiperLiTuiJianListLi {
								width: 29rpx;
								height: 29rpx;
								margin-left: 10rpx;
								background: url("/static/images/xingxing.png") no-repeat center / 29rpx 29rpx;

								&.on {
									background: url("/static/images/xingxing_1.png") no-repeat center / 29rpx 29rpx;
								}
							}
						}
					}

					.MyBotSwiperLiTabs {
						display: flex;
						justify-content: flex-start;
						margin-top: -5px;
						flex-wrap: wrap;

						.MyBotSwiperLiTabsList {
							height: 40rpx;
							line-height: 40rpx;
							padding: 0 11rpx;
							background: #ecf3fc;
							font-size: 24rpx;
							color: #4e5262;
							margin-right: 15rpx;
							margin-bottom: 10rpx;
						}
					}
				}
			}
		}
	}
	.MyEnd{
		padding: 0 24rpx;
		font-size: 28rpx;
		color: #bdc2cb;
		line-height: 109rpx;
		text-align: center;
	}
	.MyLoginBtn{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 0 24rpx;
		font-size: 32rpx;
		color: #f2b097;
		background: #ffffff;
		border-radius: 10rpx;
	}
	swiper{
		height: 343rpx;
		padding-left: -29rpx;
	}
	swiper-item{
		width: 584rpx !important;
	}
</style>